<template>
  <div>
    <el-dialog title="纠正角度" :fullscreen=true :close-on-click-modal="false" :visible.sync="visible" @close="OnClose">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="never" :body-style="contentViewHeight" class="uni-map-panel">
            <MapAngleCheck ref="mapAngleCheck" @onRotateVr="onRotateVr" @onPositionChange="onPositionChange"></MapAngleCheck>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card  shadow="never" :body-style="contentViewHeight" class="uni-map-panel">
            <VrAngleCheck ref="vrAngleCheck" @onOffsetAngle="onOffsetAngle"></VrAngleCheck>
            <div class="uni-notice" v-if="isCheck === 1" style="margin-top: 20px; color: #00ff00; font-weight: bold;">矫正状态：已矫正</div>
            <div class="uni-notice" v-else style="margin-top: 20px; font-weight: bold;">矫正状态：待矫正</div>
            <div class="uni-notice" style="">偏移角度：{{offsetAngle}}</div>
            <div class="uni-notice">照片名称：{{name}}</div>
            <div class="uni-notice">坐标信息：[{{x}},{{y}}]</div>
            <div class="uni-notice">当前第：{{vrIndex}}张</div>
            <div class="uni-notice">剩余数量：{{checkModel === 'all' ? vrList.length-vrIndex : vrList.length}}</div>
            <el-radio-group v-model="checkModel" size="small" style="margin-top: 10px; margin-left: 10px;" @change="checkModelChange">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="nocheck">待矫正</el-radio-button>
            </el-radio-group>
            <div class="uni-buttons uni-flex">
              <el-button-group >
                <el-button type="primary" size="small" icon="el-icon-arrow-left" @click="checkPrevious">上一个</el-button>
                <el-button type="primary" size="small" @click="checkNext">下一个<i class="el-icon-arrow-right el-icon--right"></i></el-button>
              </el-button-group>
              <el-button type="primary" size="small" @click="doSubmit()" :loading="loading">保存&下一个</el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import MapAngleCheck from '@/components/jfMap/mapAngleCheck.vue'
  import VrAngleCheck from '@/components/jfMap/vrAngleCheck.vue'
  export default {
    data() {
      return {
        visible: false,
        loading: false,
        rowId: '',
        allList: [],
        vrIndex: 0,
        checkModel: 'all',
        name: '',
        isCheck: 0,
        offsetAngle: 0,
        x: 0,
        y: 0
      }
    },
    components: {
      MapAngleCheck,
      VrAngleCheck
    },
    computed: {
      contentViewHeight() {
        let height = this.$store.state.common.documentClientHeight - 152
        return {
          height: height + 'px'
        }
      },
      vrList() {
        if(this.checkModel === 'all') {
          return this.allList;
        }
        else if(this.checkModel === 'nocheck') {
          return this.allList.filter((item)=>{
            return item.isCheck != 1
          })
        }
        return []
      }
    },
    methods: {
      init(floorId, id) {
        this.rowId = id
        this.visible = true
        this.loading = false
        this.checkModel = 'all'
        this.$nextTick(() => {
          this.$refs.mapAngleCheck.showFloor(floorId)
          this.$refs.mapAngleCheck.resize();
          this.refreshList(floorId)
        })
      },
      checkModelChange() {
        this.$nextTick(()=>{
          this.vrIndex = - 1;
          this.checkNext()
        })
      },
      // 获取数据列表
      refreshList (floorId) {
        this.$http({
          url: '/smis/vr/jfVrList/list',
          method: 'get',
          params: {
            'pageNo': 1,
            'pageSize': 10000,
            'floor': {
              'id': floorId
            }
          }
        }).then(({data}) => {
          if (data && data.success) {
            this.allList = data.page.list || []
            if(this.rowId && this.rowId !== '') {
              for(var i=0; i<this.allList.length; i++) {
                if(this.allList[i].id === this.rowId) {
                  this.vrIndex = i - 1;
                  this.checkNext();
                  break;
                }
              }
            } else {
              this.vrIndex = -1
              if(this.allList.length > 0) {
                this.checkNext();
              }
            }
          }
        })
      },
      checkPrevious() {
        this.vrIndex--
        if(this.vrIndex < 0) {
          this.vrIndex = 0
          this.$message.success("已是第一张")
        } else {
          this.name = this.vrList[this.vrIndex].name
          this.showVr(this.vrList[this.vrIndex])
          this.showMap(this.vrList[this.vrIndex])
        }
      },
      checkNext () {
        console.log("checkNext")
        this.vrIndex++
        if(this.vrList.length > this.vrIndex) {
          this.name = this.vrList[this.vrIndex].name
          this.showVr(this.vrList[this.vrIndex])
          this.showMap(this.vrList[this.vrIndex])
        } else {
          this.vrIndex = this.vrList.length-1
          this.$message.success("已到达最后一张")
        }
      },
      onPositionChange(x, y) {
        this.x = x;
        this.y = y;
      },
      onOffsetAngle(angle) {
        // vr比地图多出来的偏移角度
        this.offsetAngle = angle
      },
      onRotateVr(angle) {
        // 同步VR的角度
        this.$refs.vrAngleCheck.rotateVr(angle)
      },
      showVr(item) {
        if(item.filesAll && item.filesAll.length>10) {
          var filesAll = JSON.parse(item.filesAll)
          this.$refs.vrAngleCheck.showVr(filesAll.img ,item.angle)
        } else {
          this.$message.error(item.cameraCode+'号相机，拍摄的'+item.name+"照片，暂未上传");
        }
      },
      showMap(item) {
        this.x = item.x;
        this.y = item.y;
        this.isCheck = item.isCheck;
        this.$refs.mapAngleCheck.setVrMesh(item)
      },
      OnClose() {
        this.$emit('refreshDataList')
      },
      // 表单提交
      doSubmit () {
        if(this.vrList.length > this.vrIndex) {
          this.loading = true
          var item = this.vrList[this.vrIndex];
          item.angle = this.offsetAngle;
          item.isCheck = 1;
          item.x = this.x;
          item.y = this.y;
          this.$http({
            url: `/smis/vr/jfVrList/save`,
            method: 'post',
            data: item
          }).then(({data}) => {
            if (data && data.success) {
              this.$message.success(data.msg)
              this.checkNext()
            }
            this.loading = false
          })
        } else {
          this.$message.error("提交失败，请刷新重试")
        }
      }
    }
  }
</script>
<style scoped="scoped">
  .uni-notice {
    color: red;
    padding: 0px 10px;
  }
  .uni-buttons {
    padding: 10px;
    margin-top: 100px;
    justify-content: space-between;
  }
</style>
